<template>
  <div class="searchPopup-container">
    <!-- 头部搜索框 -->
    <van-search
      v-model="searchValue"
      show-action
      :placeholder="searchPlaceholder"
      @search="onSearch"
      @cancel="onCancel"
      @input="getSearchTipsList"
      shape="round"
    />
    <!-- 历史热门部分 -->
    <HistoryHot
      :historyListData="historyListData"
      :hotKeywordList="hotKeywordList"
      v-if="isComShow === 1"
      @tagClick="tagClick"
    ></HistoryHot>
    <!-- 搜索框关键字 -->
    <SearchTips v-else-if="isComShow === 2" :searchTipsList="searchTipsList" @cellClick="tagClick"></SearchTips>
    <!-- 商品列表 -->
    <SearchProust v-else :filterCategory="filterCategory" :goodsList="goodsList" @CategoryChange="CategoryChange" @priceChange="priceChange"></SearchProust>
  </div>
</template>

<script>
// 导入HistoryHot组件
import HistoryHot from '@/components/HistoryHot.vue'
// 导入SearchTips组件
import SearchTips from '@/components/SearchTips.vue'
// 导入SearchProust组件
import SearchProust from '@/components/SearchProdust.vue'
// 导入searchListAPI接口
import { searchListAPI } from '@/api/searchListAPI.js'
// 导入searchListAPI接口
import { searchTipsListAPI } from '@/api/searchTipsListAPI.js'
// 导入goodsListAPI接口
import { goodsListAPI } from '@/api/goodsListAPI.js'
// 导入eventBus
// import bus from '@/eventBus.js'
export default {
  name: 'searchPopup',
  // 注册组件
  components: {
    HistoryHot,
    SearchTips,
    SearchProust
  },
  data() {
    return {
      // 控制组件的显示
      isComShow: 1,
      // 搜索框输入的值
      searchValue: '',
      // 搜索框提示信息
      searchPlaceholder: '',
      // 历史记录数据列表
      historyListData: [],
      // 热门搜索数据列表
      hotKeywordList: [],
      // 搜索关键字列表
      searchTipsList: [],
      // 导航栏列表的数据
      filterCategory: [],
      // 商品数据列表
      goodsList: [],
      // 当前页数
      page: 1,
      // 一页显示的数据条数
      size: 20,
      // 价格排序，由高到低或是由低到高
      order: 'desc',
      // 商品类别的id
      categoryId: 0,
      // 查询的方式，以id还是以价格进行查询
      sort: 'id'
    }
  },
  methods: {
    // 点击子组件HistoryHot中的标签将标签的值传过来并发送请求
    // val是子组件HistoryHot闯过来的数据
    tagClick(val) {
      // 将searchValue的值改为val，这样点击下拉菜单的时候，就可以取得对应的数据了
      this.searchValue = val
      // 通过点击标签，获取到标签的值然后使用标签的值当做查询关键字进行发送请求
      this.onSearch(val)
    },
    // 子组件的searchProdust中的分类下拉菜单选项发生改变时发送请求
    // 函数的参数value是子组件传过来的值
    CategoryChange(value) {
      // 将子组件传过来的选项的id赋值给categoryId
      this.categoryId = value
      // 当子组件的change事件触发时，子组件里面的this.$emit()定义的自定义事件就会被触发，该函数CategoryChange就会被调用
      // 所以当该函数被调用时，就发送一次请求，获得与选项相对应的数据
      this.onSearch(this.searchValue)
    },
    // 子组件searchProdust中的价格下拉菜单选项发生改变时发送请求
    // 函数的参数value就是子组件传递过来的数据
    priceChange(value) {
      // 将子组件传过来的选项的值赋值给order
      this.order = value
      // 同时将sort查询的方式该为以价格进行查询
      this.sort = 'price'
      // 当价格选项的值发生变化时，会触发change事件，子组件里面的this.$emit()定义的自定义事件会被处罚，该函数priceChange就会被调用
      // 所以该函数被调用时，就向后台发送请求，获得响应的数据
      this.onSearch(this.searchValue)
    },
    // 回车搜索的时候触发该函数
    async onSearch(value) {
      this.isComShow = 3
      const { data: res } = await goodsListAPI(value, this.page, this.size, this.order, this.categoryId, this.sort)
      // console.log(res)
      if (res.errno !== 0) {
        return this.$toast.fail('获取商品信息失败')
      }
      const { filterCategory, goodsList } = res.data
      // 如果父子关系嵌套比较深，比如爷孙关系，这时候也可以使用eventBus来进行数据传递
      // 使用eventBus直接将返回来的商品信息传给Produst组件
      // bus.$emit('goods', goodsList)
      this.goodsList = goodsList
      this.filterCategory = JSON.parse(JSON.stringify(filterCategory).replace(/name/g, 'text').replace(/id/g, 'value'))
      // console.log(this.filterCategory)
    },
    // 点击取消的时候触发该函数
    onCancel() {
      // 当点击取消的时候后退到上一个页面
      this.$router.back()
      // 消除遮罩层
      this.$store.commit('isShadowChange', false)
    },
    // 获取搜索窗口的数据
    async getSearchListData() {
      const { data: res } = await searchListAPI()
      // console.log(res)
      if (res.errno !== 0) {
        return this.$toast.fail('获取数据失败')
      }
      // 获取搜索框的提示信息
      this.searchPlaceholder = res.data.defaultKeyword.keyword
      // 获取历史记录数据
      this.historyListData = res.data.historyKeywordList
      // 获取热门搜索数据
      this.hotKeywordList = res.data.hotKeywordList
    },
    // 输入框内容改变会触发该函数，获取搜索面板的关键字
    async getSearchTipsList(value) {
      this.isComShow = 2
      const { data: res } = await searchTipsListAPI(value)
      if (res.errno !== 0) {
        return this.$toast.fail('获取关键字失败')
      }
      // console.log(res)
      this.searchTipsList = res.data
    }
  },
  created() {
    this.getSearchListData()
  }
}
</script>

<style lang="less" scoped>
.searchPopup-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #efefef;
}
</style>
